import { useEffect, useRef, useState } from 'react';
import { useDispatch, useSelector, ArticleModelState, Link, Loading } from 'umi';
import { EyeOutlined, ShareAltOutlined, HeartOutlined } from '@ant-design/icons';
import styles from './index.less';
import Swiper from '@/swiper/swiper';
import { formatDate } from '../utils/index'
import Right from '@/components/right/right'
import Category from '@/components/categoryNav';
import { share } from '@/share';
import { IArticleItem, IShareItem } from '@/types';
function IndexPage() {
  // 通过useSelector获取model数据
  const { article, loading } = useSelector((state: { article: ArticleModelState, loading: Loading }) => {
    return {
      article: state.article,
      loading: state.loading
    }
  });

  const dispatch = useDispatch();
  // 定义分页的状态
  const [page, setPage] = useState(1);
  const [isFetching, setIsFetching] = useState(false);

  const scrollEle = useRef(null)
  useEffect(() => {
    (dispatch({
      type: 'article/getArticleList',
      payload: page
    }) as unknown as Promise<any>).then(res => {
      setIsFetching(false);
    })
  }, [page]);

  useEffect(() => {
    function loadMore() {
      if (article.articleLength <= article.articleList.length || isFetching) {
        return;
      }
      if (window.innerHeight + window.scrollY > ((scrollEle.current as unknown as HTMLElement).clientHeight + 42 + 63 - 20)) {
        setIsFetching(true);
        setPage(page + 1);
      }
    }

    window.addEventListener('scroll', loadMore);
    return () => {
      window.removeEventListener('scroll', loadMore);
    }
  }, [article, isFetching])



  useEffect(() => {
    dispatch({
      type: 'setting/getSetting'
    })
  }, [])


  useEffect(() => {
    dispatch({
      type: 'article/getArticleArchives'
    })
  }, []);

  function shareArticle(item: IArticleItem) {
    share(item as unknown as IShareItem)
  }
  return <div className={styles.wrap} ref={scrollEle}>
    <div className={styles.left}>
      <Swiper />
      <Category />
      <div className={styles.content}>
        {
          article.articleList.length && article.articleList.length > 0 ? article.articleList.map((item, index) => {

            return <div key={index} className={styles.item_content}>

              <dl>
                <Link to={`/article/${item.id}`}>
                  <dt>
                    <b>{item.title}</b>
                    <span className={styles.exp}>{formatDate(item.updateAt)}</span>
                    <span>{item.category ? item.category.label : null}</span>
                  </dt>
                </Link>
                <dd>
                  <Link to={`/article/${item.id}`}>
                    {
                      item.cover ? (<div className={styles.dl_left}><img src={item.cover} alt="" /> </div>) : ''
                    }
                  </Link>
                  <div className={styles.dl_right}>
                    <p>{item.summary}</p>
                    <div className={styles.icons}>
                      <Link to={`/article/${item.id}`}>
                        <EyeOutlined />
                        <span>{item.likes}</span><span>·</span>
                        <HeartOutlined />
                        <span>{item.views}</span><span>·</span>
                      </Link>
                      <span onClick={() => shareArticle(item)}><ShareAltOutlined /><time className={styles.share}>分享</time></span>
                    </div>
                  </div>
                </dd>
              </dl>

            </div>
          }) : "暂无数据"
        }
        {article.articleLength > article.articleList.length && <div>loading...</div>}
      </div>
    </div>
    <div className={styles.right}>
      <Right />
    </div>
  </div>
}

export default IndexPage;

